<template>
  <h3>选项式API</h3>
  <div>{{ str }}</div>
  <hr />
  <div class="count">{{ count }}</div>
  <button type="button" @click="accCount">累加 count 的值</button>
  <hr />
  <p class="msg">{{ msg }}</p>
  <button type="button" @click="changeMsg">修改msg</button>
  <myComp></myComp>
</template>

<script>
import myComp from '../study2/diyDemo6.vue';
const c = 100
// 在外部函数内部无法使用this
function name2() {
  // 这里的this是 undefined
  console.log(this) // undefined
}
name2()

export default {
  name: 'diyDemo',
  // 数据
  data() {
    let str = '好好学习str'

    return {
      msg: str,
      count: c
    }
  },
  // 方法
  methods: {
    changeMsg() {
      this.msg = this.commomMethod()
    },
    accCount() {
      this.count++
    },
    commomMethod() {
      return this.count + this.msg
    }
  },
  // 计算属性
  computed: {},
  mounted() { },
  // 子组件
  components: {
    myComp
  },
}
</script>

<style></style>
